<template>
  <div class="boxContent">
    <div class="appBox">
      <div class="searchList">
        <el-form :model="state.params"
                 ref="FormInstance "
                 class="boxFrom">
          <div class="searchBox">
            <template v-for="(item, index) in state.totalInputColumns"
                      :key="index">
              <el-form-item v-if="item.type == 'input'">
                <el-input v-model="state.params[item.key]"
                          clearable
                          :placeholder="item.label"></el-input>
              </el-form-item>
              <el-form-item v-if="item.type == 'select'">

                <el-cascader v-model="state.params[item.key]"
                             :options="state.propsCity"
                             :props="state.props"
                             :placeholder="item.label"
                             clearable
                             v-if="item.key == 'city'" />

                <el-select v-model="state.params[item.key]"
                           :placeholder="item.label"
                           clearable
                           v-if="item.key == 'workTypeId'">
                  <el-option label="长白班"
                             value="长白班" />
                  <el-option label="两班倒"
                             value="两班倒" />
                </el-select>

                <el-select v-model="state.params[item.key]"
                           :placeholder="item.label"
                           clearable
                           v-if="item.key == 'positionStatus'">
                  <el-option label="已下架"
                             :value="0" />
                  <el-option label="招聘中"
                             :value="1" />
                </el-select>
                <el-select style="width: 130px"
                           v-model="state.params[item.key]"
                           :placeholder="item.label"
                           clearable
                           v-if="item.key == 'startYear'">
                  <el-option v-for="i in state.totalInputColumnsOption.startYearList"
                             :key="i"
                             :label="i.label"
                             :value="i.value" />
                </el-select>
                <div v-if="item.yaer == 'year'">&nbsp; -</div>
                <el-select style="width: 130px"
                           v-model="state.params[item.key]"
                           :placeholder="item.label"
                           clearable
                           v-if="item.key == 'endYear'">
                  <el-option v-for="i in state.totalInputColumnsOption.endYearList"
                             :key="i"
                             :disabled="state.params.startYear > i.value"
                             :label="i.label"
                             :value="i.value" />
                </el-select>
              </el-form-item>
            </template>
          </div>

          <el-form-item class="btns">
            <el-button v-preventReClick
                       type="primary"
                       plain
                       @click="methods.handleAction('query')">搜索</el-button>
            <el-button v-preventReClick
                       @click="methods.handleAction('reset')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="tabaleBox">
        <el-table border
                  v-loading="state.loading"
                  :data="state.tableData"
                  style="width: 100%"
                  :header-cell-style="{ color: '#000' }">
          <el-table-column prop="positionName"
                           label="岗位名称"
                           show-overflow-tooltip
                           align="center"
                           width="100" />
          <el-table-column prop="companyName"
                           label="所属企业"
                           show-overflow-tooltip />
          <el-table-column prop="positionTime"
                           label="发布时间"
                           show-overflow-tooltip
                           align="center"
                           width="180">
          </el-table-column>
          <el-table-column prop="viewCount"
                           label="浏览次数"
                           show-overflow-tooltip
                           align="center"
                           width="110">
          </el-table-column>
          <el-table-column prop="submitCount"
                           label="投递人数"
                           show-overflow-tooltip
                           align="center"
                           width="110">
            <template #default="scope">
              <span class="cup primary"
                    v-if="scope.row.submitCount >0"
                    @click="$router.push(`/user/allUser?positionId=${scope.row.id}&jumpType=0`)"> {{ scope.row.submitCount }}</span>
              <span v-else>{{ scope.row.submitCount }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="recruitedCount"
                           label="已招聘"
                           show-overflow-tooltip
                           width="110"
                           align="center">
            <template #default="scope">
              <span class="cup primary"
                    @click="$router.push(`/user/allUser?positionId=${scope.row.id}&jumpType=1`)"
                    v-if="scope.row.recruitedCount >0"> {{ scope.row.recruitedCount }}</span>
              <span v-else>{{ scope.row.recruitedCount }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="clockCount"
                           label="已打卡人数"
                           show-overflow-tooltip
                           align="center"
                           width="110">
            <template #default="scope">
              <span class="cup primary"
                    @click="$router.push(`/user/allUser?positionId=${scope.row.id}&jumpType=2`)"
                    v-if="scope.row.clockCount > 0"> {{ scope.row.clockCount }}</span>
              <span v-else> {{ scope.row.clockCount }} </span>
            </template>
          </el-table-column>

          <el-table-column prop="childCompanyName"
                           label="所属子企业"
                           show-overflow-tooltip
                           align="left" />
          <el-table-column prop="positionStatus"
                           label="当前状态"
                           show-overflow-tooltip
                           align="center"
                           width="100">
            <template #default="scope">
              <span class="error"
                    v-if="scope.row.positionStatus == false ">已下架</span>
              <span class="primary"
                    v-if="scope.row.positionStatus == true ">招聘中</span>
            </template>
          </el-table-column>
          <el-table-column prop="state"
                           label="状态开关"
                           align="center"
                           width="100">
            <template #default="scope">
              <el-switch v-permission="1079"
                         v-model="scope.row.positionStatus"
                         @change="methods.handleAction('xj', scope.row)" />
            </template>
          </el-table-column>
          <el-table-column prop="btns"
                           label="操作"
                           show-overflow-tooltip
                           align="center"
                           width="130"
                           fixed="right">
            <template #default="scope">
              <div class="flex_sa cup primary">
                <div @click="methods.handleAction('edit', scope.row)"
                     v-permission="1078">
                  编辑
                </div>

                <!-- <div @click="methods.handleAction('adopt', scope.row)"
                     v-if="scope.row.approveStatus == 0"
                     v-permission="1177">
                  通过
                </div>
                <div @click="methods.handleAction('refuse', scope.row)"
                     v-if="scope.row.approveStatus == 0"
                     v-permission="1178">
                  拒绝
                </div> -->

                <div v-if="scope.row.recommendStatus == 0"
                     @click="methods.handleAction('swtj', scope.row)"
                     v-permission="1081">
                  设为推荐
                </div>
                <div @click="methods.handleAction('qxtj', scope.row)"
                     v-if="scope.row.recommendStatus == 1"
                     class="error"
                     v-permission="1082">
                  取消推荐
                </div>
                <div></div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination background
                       v-model:current-page="state.params.pageNum"
                       v-model:page-size="state.params.pageSize"
                       :page-sizes="[10, 20, 30, 50]"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="state.totalSize"
                       @size-change="methods.handleSizeChange"
                       @current-change="methods.handleCurrentChange" />
      </div>
      <!-- 职位描述 dialog -->
      <el-dialog v-model="state.dialogDescribe"
                 center
                 title="职位描述"
                 width="40%"
                 top="15vh">
        <el-scrollbar :height="$px2rem('350px')">
          <div v-html="state.dialogDescribeData"></div>
        </el-scrollbar>
      </el-dialog>

    </div>
  </div>
</template>

<script setup>
import {
  ref,
  onMounted,
  reactive,
  toRefs,
  defineComponent,
  getCurrentInstance,
} from "vue";
import { ElMessage, ElLoading, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();
const app = getCurrentInstance()?.proxy;
import area from "@/utils/area.js";
const initState = () => {
  return {
    loading: false,
    props: {
      checkStrictly: true,
      label: "value",
      value: "value",
    },
    propsCity: [],
    totalSize: 0,
    tableData: [],
    params: {
      approveFunction: 4,
      pageNum: 1,
      pageSize: 10,
    },
    totalInputColumns: [
      { key: "childCompanyId", label: "选择子企业", type: "select" },
      { key: "city", label: "选择所在城市", type: "select" },
      { key: "companyName", label: "企业简称名称", type: "input" },
      { key: "name", label: "搜索岗位名称", type: "input" },
      { key: "positionStatus", label: "选择职位状态", type: "select" },
    ],
    totalInputColumnsOption: {
      cityList: [],
      position: [],
      positionType: [],
    },
  };
};
const state = reactive(initState());
onMounted(() => {

  methods.getDataList();
  state.propsCity = area;
  state.totalInputColumnsOption.positionType = JSON.parse(
    localStorage.getItem("positionType")
  );
});
const methods = {

  handleAction (type, data) {
    switch (type) {
      case "add":
        router.push("/position/add");
        break;
      case "refuse":  //拒绝
        break;
      case "adopt":  // 通过
        break;
      case "export": //导出
        break;
      case "query": //查询
        methods.getDataList();
        break;
      case "reset": // 重置
        state.params = initState().params;
        break;
      case "edit": // 编辑
        router.push("/position/add?id=" + data.id + '&companyId=' + data.companyId);
        break;
      case "swtj": // 职位描述 查看
        methods.updateRecommendStatus(data, 1)
        break;
      case "qxtj": // 职位描述 查看
        methods.updateRecommendStatus(data, 0)
        break;
      case "xj": // 上下架 查看
        methods.updateOnOffPosition(data, data.positionStatus == true ? '1' : '0')
        break;
      case "delete": // 删除
        ElMessageBox.confirm("请确认是否删除该招聘职位?", "删除招聘职位", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            app.$http.get("/position/deleteById?id=" + data.id).then((res) => {
              methods.getDataList();
              ElMessage({
                type: "success",
                message: "已删除",
              });
            });
          })
          .catch(() => {
            methods.getDataList();
            ElMessage({
              type: "info",
              message: "已取消",
            });
          });

        break;
    }
  },
  updateOnOffPosition (data, type) {
    app.$get('/position/updateOnOffPosition', { positionId: data.id, positionStatus: type }).then(res => {
      if (res.code == 200) {
        ElMessage.success('操作成功')
      }
      methods.getDataList()
    }).catch((error) => {
    })
  },

  updateRecommendStatus (data, type) {
    app.$get('position/updateRecommendStatus', { positionId: data.id, recommendStatus: type }).then(res => {
      console.log(res);
      if (res.code == 200) {
        ElMessage.success('操作成功')
        methods.getDataList()
      }
    })
  },
  getDataList () {
    if (state.params.city?.length - 0 > 0) {
      state.params.workAddrProvince = state.params.city[0];
      state.params.workAddrCity = state.params.city[1];
      state.params.workAddrDistrict = state.params.city[2];
    } else {
      state.params.workAddrProvince = "";
      state.params.workAddrCity = "";
      state.params.workAddrDistrict = "";
    }
    state.loading = true
    app.$http.post("/position/platPageList", state.params).then((res) => {
      res.data.list.forEach(rs => {
        if (rs.positionStatus == 0) {
          rs.positionStatus = false
        } else {
          rs.positionStatus = true
        }
      })
      state.tableData = res.data.list;
      state.totalSize = res.data.total;
      state.loading = false
    }).catch(() => {
      state.loading = false
    })
  },
  //分页变化
  handleSizeChange () {
    state.params.pageNum = 1;
    methods.getDataList();
  },
  //表格翻页
  handleCurrentChange () {
    methods.getDataList();
  },
};
</script>

<style lang="scss" scoped>
.appBox {
  background: #fff;
  border-radius: 5px;
  padding: 20px;
  height: calc(100% - 20px);
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .tabaleBox {
    overflow: hidden;
    flex: 1;
  }
  .btnsDatil {
    color: #0079fe;
    cursor: pointer;
  }
  .pagination {
    margin-top: 20px;
    height: 50px;
    display: flex;
    justify-content: flex-end;
  }
  ::v-deep(.el-dialog__body) {
    max-height: 380px;
  }
  .imgs {
    flex-wrap: wrap;
    .forbox {
      // width: 150px;
      height: 150px;
      margin: 10px 0 0 10px;
    }
    .imgBox {
      height: 100%;
      width: auto;
    }
    .videoBox {
      width: auto;
      height: 100%;
    }
  }

  // .imgs .forbox:nth-child(4n + 1) {
  //   margin-left: 0;
  // }
}
</style>
